<template>
  <div class="alarm-search">
    <!-- 筛选 -->
    <div class="filter">
      <div class="hasSelect" v-if="showSelect">
        <span class="nor">已选条件</span>
        <span class="sel" v-if="saveData.cityClick" @click="alone('province')">{{saveData.cityClick}}</span>
        <span class="sel" v-if="saveData.districtClick" @click="alone('area')">{{saveData.districtClick}}</span>
        <span class="sel" v-if="saveData.equipmentClick" @click="alone('equipment')">{{saveData.equipmentClick}}</span>
        <span class="sel" v-if="saveData.alarmClick" @click="alone('alarm')">{{saveData.alarmClick}}</span>
        <span class="clearAll" @click="clearAll()">清除全部</span>
      </div>

      <div class="condition">
       <!-- 全国 -->
        <div class="area" v-if="countryPower">
          <div style="width:170px;float:left;">
            <div class="classification">城市选择</div>
            <div class="all" :class="{'active':isCheckcity === 'all'}"  @click='city_click("all")'>全国</div>
          </div>

          <div style="width:calc(100% - 170px);float:left;">
            <ul class="more">
              <li v-for="(item,i) in province" :key="i"  @mouseenter="mouseenter_province(item)">
                <span class="more-con" :class="{'active':isCheckcity ===  item.value}">{{item.label}}</span>
                <div class="popover">
                  <div class="arrow"></div>
                  <div class="p-content">
                    <div class="popover-content">
                      <span >{{item.label}}</span>
                    </div>

                    <ul class="clear">
                      <li @click="citys_click('', '', item, i)">
                        <span :class="{'active':Checkcity === item.value}">全部</span>
                      </li>
                      <!-- 市 -->
                      <li v-for="(items,index) in city" :key="index">
                        <span :class="{'active':Checkcity === items.value}" @click="citys_click(items, index, item, i)" >{{items.label}}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- 省市2 -->
        <div class="area" v-if="cityPower">
          <div style="width:170px;float:left;">
            <div class="classification">城市选择</div>
            <div class="all" :class="{'active':isCheckcity === 'all'}"  @click='click_province("all")'>全省</div>
          </div>

          <div style="width:calc(100% - 170px);float:left;">
            <ul class="more">
              <li v-for="(item,i) in city" :key="i"  @click="click_province(item)">
                <span :class="{'active':isCheckcity ===  item}">{{item.label}}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 区域 -->
        <div class="area" v-if="showArea">
          <div style="width:170px;float:left;">
            <div class="classification">区域选择</div>
            <div class="all" :class="{'active':isCheckarea === 'all'}"  @click='area_click("all")'>全部</div>
          </div>

          <div style="width:calc(100% - 170px);float:left;">
            <ul class="more">
              <li v-for="(item,i) in area" :key="i"  @mouseenter="mouseenter_area(item)">
                <span class="more-con" :class="{'active':isCheckarea ===  item.value}">{{item.label}}</span>
                <div class="popover">
                  <div class="arrow"></div>
                  <div class="p-content">
                    <div class="popover-content">
                      <span >{{item.label}}</span>
                    </div>

                    <ul class="clear">
                      <li @click="areas_click('','',item,i)">
                        <span :class="{'active':Checkarea === item.value}">全部</span>
                      </li>
                      <li v-for="(items,index) in district_" :key="index">
                        <span :class="{'active':Checkarea === items.site_id}" @click="areas_click(items, index, item, i)" >{{items.site_name}}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- 设备类型 -->
        <div class="area">
          <div style="width:170px;float:left;">
            <div class="classification">设备类型</div>
            <div class="all" :class="{'active':isEquipment === 0}"  @click='equipmentStatus("")'>全部</div>
          </div>
          <div style="width:calc(100% - 170px);float:left;">
            <ul class="more">
              <li>
                <span :class="['spancolor',{'active':isEquipment === 1}]" @click="equipmentStatus('消防栓')" >消防栓</span>
              </li>
              <li>
                <span  :class="['spancolor',{'active':isEquipment === 2}]" @click="equipmentStatus('烟感设备')" >烟感设备</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="area">
          <div style="width:170px;float:left;">
            <div class="classification">异常状态</div>
            <div class="all" :class="{'active':isCheckalarm === 0}"  @click='alarmStatus("")'>全部</div>
          </div>
          <div style="width:calc(100% - 170px);float:left;">
            <ul class="more">
              <li>
                <span :class="['spancolor',{'active':isCheckalarm === 1}]" @click="alarmStatus('警情异常')" >警情异常</span>
              </li>
              <li>
                <span  :class="['spancolor',{'active':isCheckalarm === 2}]" @click="alarmStatus('传感器异常')" >传感器异常</span>
              </li>
              <li>
                <span  :class="['spancolor',{'active':isCheckalarm === 3}]" @click="alarmStatus('低电量')" >低电量</span>
              </li>
              <li>
                <span  :class="['spancolor',{'active':isCheckalarm === 4}]" @click="alarmStatus('设备离线')" >设备离线</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Config from "../../../config";
// import { regionData } from 'element-china-area-data'
import { regionData } from 'static/js/regionData'
export default {
  name: 'Search',
  data: function () {
    return {
      // 省市************
      // 保存改变前的数据
      provinceName: {},
      // 省数据
      province: [],
      // 保存省数据
      provinces: [],

      // 市数据
      city: [],

      // 颜色
      isCheckcity: 'all',
      Checkcity: '',

      // 区,场所**********
      // 保存改变前的数据
      areaName: {},
      // 区数据
      area: [],
      // 保存区数据
      areas: [],

      // 场所数据
      district_: [],

      // 颜色
      isCheckarea: 'all',
      Checkarea: '',

      // 设备类型**********
      isEquipment: 0,
      // 报警类型**********
      isCheckalarm: 0,

      // 选中的数据
      saveData: {
        // 选中的市
        cityClick: '',
        // 选中的场所
        districtClick: '',
        // 选中的设备
        equipmentClick: '',
        // 选中的报警
        alarmClick: '',
      },

      // 传递的数据
      datas: {
        number: {
          // country: 86,
          country: '',
          province: '',
          city: '',
          area: '',
          district: '',
        },
        devname: '',
        alarm: ''
      },
      // 保存一打开的初始编码,清空用
      clear: null,

      // show
      showSelect: false,
      showArea: false,

      countryPower: false,
      cityPower:false,
    }
  },
  watch: {
    saveData: {
      deep: true,
      handler(data){
        let flag = 0
        for(let i in this.saveData) {
          if (!this.saveData[i]) {
            flag ++
          }
        }
        if (flag !== 4) {
          this.showSelect = true;
        } else {
          this.showSelect = false;
        }
      }
    },
    datas: {
      deep: true,
      handler(data){
        // console.log(data)
        if (data.number.country !== 86) {
          if (data.number.province) {
            this.showArea = false
          } else{
            this.showArea = true
          }
        } else {
          this.showArea = false
        }

        // 一开始初始编码
        if (!this.clear) {
          this.clear = JSON.parse(JSON.stringify(data))
        }
        this.$emit('search_data', this.datas)
      }
    }
  },
  methods: {
    // 全国*************
    search_country() {
      for(let i in this.datas.number) {
        this.datas.number[i] = ''
      }
      this.datas.number.country = 86

      let country = {page: 0,size: 100,devtype: Config.objType.devtype,  country: '86'};

      this.search(country).then((res) => {
        this.province.splice(0)
        if (res.array.length) {
          res.array.map((item) => {
            // 省
            regionData.map((province) => {
              if (province.value === item.province) {
                this.province.push(province)
              }
            })
          })
        }
        this.provinces = this.province
      })
    },
    // 鼠标移入省
    mouseenter_province(data) {
      // 保存城市名
      if (this.provinceName.value !== data.value){
        this.provinceName = data
      }

      let province = {page: 0,size: 100,devtype: Config.objType.devtype,  province: data.value};
      this.search(province).then((res) => {
        this.city.splice(0)
        if (res.array.length) {
          res.array.map((item) => {
            // 省
            regionData.map((province) => {
              if (province.value === data.value) {
                // 市
                province.children.map((city) => {
                  if (city.value === item.city){
                    this.city.push(city)
                  }
                })
              }
            })
          })
        }
      })
    },
    // 全部
    city_click(item) {
      this.province = JSON.parse(JSON.stringify(this.provinces))
      this.isCheckcity = item
      this.Checkcity = ''

      this.saveData.cityClick = ''

      this.area_click('all')

      // 清空所有数据,加入全国
      for(let i in this.datas.number) {
        this.datas.number[i] = ''
      }
      this.datas.number.country = 86
    },
    // 单个市点击
    citys_click(items, index, item, i) {
      this.province = JSON.parse(JSON.stringify(this.provinces))
      this.isCheckcity = item.value

      for(let i in this.datas.number) {
        this.datas.number[i] = ''
      }
      if (items) {
        // 单个市
        this.Checkcity = items.value
        this.$set( this.province, i, {label: items.label, value:item.value, children:item.children})
        this.saveData.cityClick = items.label

        // 清空所有数据,加入市
        this.datas.number.city = items.value

        // 调取行政区接口
        this.search_city(items.value)
      } else {
        // 全省
        this.Checkcity = item.value
        // this.$set(this.province, i, this.provinceName)

        this.saveData.cityClick = this.provinceName.label

        // 清空所有数据,加入省
        this.datas.number.province = this.provinceName.value
      }

      this.area_click('all')
    },

    // 省市***********
    search_province() {
      for(let i in this.datas.number) {
        this.datas.number[i] = ''
      }
      this.datas.number.province = this.district.provinceCode

      let province = {page: 0,size: 100,devtype: Config.objType.devtype,  province: this.district.provinceCode};
      this.search(province).then((res) => {
        this.city.splice(0)
        if (res.array.length) {
          res.array.map((item) => {
            // 省
             regionData.map((province) => {
               if (province.value === this.$substring.province(item.city) ) { // item.city.substring(0, 2) + '0000'
                 // 市
                 province.children.map((city) => {
                   if (city.value === item.city) {
                     this.city.push(city)
                   }
                 })
               }
             })
          })
        }
      })
    },
    click_province(items) {
      this.isCheckcity = items
      for(let i in this.datas.number) {
        this.datas.number[i] = ''
      }

      // 调取行政区接口
      if (items !== 'all') {
        this.saveData.cityClick = items.label
        this.showArea = true
        this.search_city(items.value)

        // 清空所有数据,加入市
        this.datas.number.city = items.value
      } else {
        this.saveData.cityClick = ''
        this.showArea = false
        // 清空所有数据,加入省
        this.datas.number.province = this.district.provinceCode
      }
      this.area_click('all')
    },


    // 区,场所***************
    search_city(data) {
      let city = {page: 0,size: 100,devtype: Config.objType.devtype,  city: data};
      this.search(city).then((res) => {
        this.area.splice(0)
        if (res.array.length) {
          res.array.map((item) => {
            // 省
            regionData.map((province) => {
              if (province.value === this.$substring.province(data)) { // data.substring(0, 2) + '0000'
                // 市
                province.children.map((city) => {
                  if (city.value === data){
                    // 区
                    city.children.map((area) => {
                      if (area.value === item.district) {
                        this.area.push(area)
                      }
                    })
                  }
                })
              }
            })
          })
        }
        this.areas = this.area
      })
    },
    // 鼠标移入行政区
    mouseenter_area(data) {
      // 保存城市名
      if (this.areaName.value !== data.value){
        this.areaName = data
      }

      let area = {page: 0,size: 100,devtype: Config.objType.devtype,  district: data.value};
      this.search(area).then((res) => {
        if (res.array.length) {
          this.district_ = res.array
        }
      })
    },
    // 全部
    area_click(item) {
      this.area = JSON.parse(JSON.stringify(this.areas))
      this.isCheckarea = item
      this.Checkarea = ''

      this.saveData.districtClick = ''

      // 清空区, 场所
      this.datas.number.area = ''
      this.datas.number.district = ''
    },
    // 单个区点击
    areas_click(items, index, item, i) {
      this.area = JSON.parse(JSON.stringify(this.areas))
      this.isCheckarea = item.value

      // 清空区, 场所
      this.datas.number.area = ''
      this.datas.number.district = ''
      if (items) {
        // 单个场所
        this.Checkarea = items.site_id
        this.$set( this.area, i, {label: items.site_name, value:item.value})

        this.saveData.districtClick = items.site_name

        // 保存场所
        this.datas.number.district = items.site_id
        // // 调取行政区接口
        // this.search_city(items.value)
      } else {
        // 区
        this.Checkarea = item.value
        // this.$set(this.province, i, this.provinceName)
        this.saveData.districtClick = this.areaName.label

        // 保存行政区
        this.datas.number.area = item.value
      }
    },

    // 搜索省市区
    search(params) {
      return new Promise((resolve, reject) =>{
        // 判断权限 test//神//凡人
        if (this.role[0].sort === 93) {
          params.site_type='test'
        }else if (this.role[0].sort !== 100) {
          params.site_type='official'
        }
        let url = `${Config.DEVICE_MANAGE_URL}/device_stie_user/district_group_query`;
        this.$http.get(url, params).then(res => {
          if (res) {
             resolve(res)
          }
        });
      });
    },
    // 设备选择***********
    equipmentStatus(data) {

      switch (data) {
        case '':
        this.isEquipment = 0
        break
        case '消防栓':
        this.isEquipment = 1
        break
        case '烟感设备':
        this.isEquipment = 2
        break
      }

      this.saveData.equipmentClick = data
      this.datas.devname = data

    },
    // 报警选择***********
    alarmStatus(data) {
      switch (data) {
        case '':
        this.isCheckalarm = 0
        break
        case '警情异常':
        this.isCheckalarm = 1
        break
        case '传感器异常':
        this.isCheckalarm = 2
        break
        case '低电量':
        this.isCheckalarm = 3
        break
        case '设备离线':
        this.isCheckalarm = 4
        break
      }

      this.saveData.alarmClick = data
      this.datas.alarm = data

    },


    // 清除全部
    clearAll() {
      this.city_click('all')
      this.equipmentStatus('')
      this.alarmStatus('')

      this.datas = JSON.parse(JSON.stringify(this.clear))
    },
    // 清除单个
    alone(data) {
      switch (data) {
        case 'province':
        if (this.cityPower) {
          // 清空所有数据,加入全国
          for(let i in this.datas.number) {
            this.datas.number[i] = ''
          }
          this.datas.number.province = this.district.provinceCode
        } else {
          this.city_click('all')
        }
        break
        case 'area':
        this.area_click('all')
        break
        case 'equipment':
        this.equipmentStatus('')
        break
        case 'alarm':
        this.alarmStatus('')
        break
      }
    },
  },
  computed: {
    ...mapGetters('user', {
      module: 'dealedModule',
      user: 'getUser',
      role: 'getRole',
      district: 'getDistrict'
    })
  },
  mounted() {
    // 超级管理员
    if (!this.district.provinceCode && !this.district.cityCode  && !this.district.areaCode ){
      this.countryPower = true
      this.search_country()
    }
    // 省级
    if (this.district.provinceCode && !this.district.cityCode  && !this.district.areaCode ){
      this.cityPower = true
      this.search_province()
    }
    // 市级
    if (this.district.provinceCode  && this.district.cityCode  && !this.district.areaCode){
      // for(let i in this.datas.number) {
      //   this.datas.number[i] = ''
      // }
      this.datas.number.city = this.district.cityCode
      this.search_city(this.district.cityCode)
    }
    // 场所
    if (this.district.provinceCode  && this.district.cityCode  && this.district.areaCode ){
      this.datas.number.country = 86
      this.datas.number.district = this.district.districtId
    }
    // 如果有路由
    if (this.$route.params.id) {
      switch (this.$route.params.id.devname) {
        case '':
          this.saveData.equipmentClick = ''
          this.datas.devname = ''
          this.isEquipment = 0
          break
        case "fireplug":
          this.saveData.equipmentClick = '消防栓'
          this.datas.devname = '消防栓'
          this.isEquipment = 1
          break
        case "scm":
          this.saveData.alarmClick = '烟感设备'
          this.datas.alarm = '烟感设备'
          this.isEquipment = 2
          break
      }

      if (this.$route.params.id.type !== '') {
          this.saveData.alarmClick = '警情异常'
          this.datas.alarm = '警情异常'
          this.isCheckalarm = 1
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../../../static/scss/common";
.alarm-search{
  margin-bottom: 24px;
  // 搜索
  .filter {
    width: 100%;
    height: auto;
    background: $white;
    padding: 0px 25px;
    box-sizing: border-box;
    .active {
      background: $red;
      padding: 0px 6px;
      color: $white !important;
      border-radius: 10px;
      text-align: center;
      min-width: 22%;
    }
    .more-con.active:after {
      content: "";
      margin-left: 4px;
      vertical-align: 0px;
      border: 4px solid transparent;
      border-top-color: #fff !important;
      display: inline-block;
    }
    .hasSelect {
      cursor: pointer;
      padding-bottom: 20px;
      border-bottom: 1px solid #f0f0f0;
      font-size: 12px;
      padding-top: 16px;
      .nor {
        font-size: 14px;
        color: $gray3;
        margin-right: 18px;
      }
      .sel {
        border: 1px solid $red;
        color:$red;
        height: 18px;
        margin-right: 10px;
        padding: 0px 20px 0px 10px;
        border-radius: 10px;
        position: relative;
      }
      .sel::after {
        position: absolute;
        display: block;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
        content: " ";
        width: 15px;
        height: 8px;
        background: url("../../../../static/image/device/sel.png") no-repeat;
      }
      .clearAll {
        color: $gray9;
      }
    }
    .condition {
      .area {
        padding: 17px 0 0;
        line-height: 20px;
        .classification {
          width: 85px;
          color: $gray3;
          font-size: 14px;
          float: left;
        }
        .all {
          // width: 60px;
          text-align: center;
          color: $gray3;
          float: left;
          font-size: 14px;
          cursor: pointer;
        }

        .more {
          color: $gray6;
          float: left;
          border-bottom: 1px solid #f0f0f0;
          width: 100%;
          padding-bottom: 6px;
          li {
            float: left;
            height: 28px;
            font-size: 14px;
            cursor: pointer;
            min-width: 120px;
            position: relative;
            .more-con,
            .spancolor {
              color: #333;
              display: inline-block;
            }
            .more-con:after {
              content: "";
              margin-left: 4px;
              vertical-align: 0px;
              border: 4px solid transparent;
              border-top-color: $gray6;
              display: inline-block;
            }
            .popover {
              display: none;
              width: 528px;
              position: absolute;
              top: 25px;
              left: 0px;
              z-index: 1000;
              cursor: auto;
              user-select: text;
              white-space: normal;
              font-size: 12px;
              line-height: 1.5;
              font-weight: 500;
              text-align: left;
              background: $white;
              box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
              border: 1px solid #e5e5e5;
              border-radius: 4px;
              .arrow {
                border-width: 5px;
                left: 26px;
                top: -10px;
                position: absolute;
                display: block;
                width: 0;
                height: 0;
                border-color: transparent transparent #e5e5e5;
                border-style: solid;
              }
              .arrow:after {
                display: block;
                width: 0;
                height: 0;
                border-style: solid;
                content: "";
                margin-top: -3px;
                margin-left: -4px;
                border-width: 4px;
                border-color: transparent transparent $white;
              }
              .p-content {
                background-color: #fff;
                background-clip: padding-box;
                border-radius: 4px;
                .popover-content {
                  padding: 24px 0 24px 24px;
                  span {
                    color: #ccc;
                    font-size: 16px;
                    cursor: default;
                    display: block;
                  }
                }
                .clear {
                  padding: 0px 24px 15px 24px;
                  width: 100%;
                  display: inline-block;
                  box-sizing: border-box;
                  li {
                    font-weight: 400;
                    min-width: 25%;
                    margin-bottom: 5px;
                    float: left;
                    line-height: 20px;
                  }
                }
              }
            }
          }
          li:hover .popover {
            display: block;
          }
        }
        .more.bb {
          border: 0;
        }
      }
      .area:after {
        content: "";
        clear: both; /*清除浮动*/
        display: block; /*确保该元素是一个块级元素*/
      }
    }
  }
}
</style>
